<template>
  <card>
      <Tree ref="tree" :data="buildMenuTree" multiple></Tree>
      <Spin size="large" fix v-if="spinShow"></Spin>
  </card>
</template>

<script>
    import iviewCheck from '@/view/common/checkbox/Checkbox.vue'
    export default {
        data () {
            return {
                id: '',
                role: {},
                baseURL: '/user/menu',
                menus: [],
                spinShow: false
            }
        },
        computed: {
            buildMenuTree: function () {
                let menuList = []
                this.menus.forEach((menu) => {
                    let treeNode = {
                        title: menu.title,
                        expand: menu.checked,
                        render: (h, { root, node, data }) => {
                            return h('span', {
                                style: {
                                    display: 'inline-block',
                                    fontWeight: 'bold',
                                    fontSize: '15px',
                                    color: '#2d8cf0',
                                    width: '100%'
                                }
                            }, [
                                h('span', [
                                    h(iviewCheck, {
                                        attrs: {
                                            // 定义静态属性
                                        },
                                        props: {
                                            state: menu.checked
                                        },
                                        style: {
                                            marginRight: '8px'
                                        },
                                        on: {
                                            'onChange': () => {
                                                this.onChange(menu)
                                            }
                                        }
                                    }),
                                    h('Icon', {
                                        props: {
                                            type: 'ios-pricetags'
                                        },
                                        style: {
                                            marginRight: '8px'
                                        }
                                    }),
                                    h('span', data.title)
                                ])
                            ]);
                        }
                    }
                    treeNode.children = []
                    menuList.push(treeNode)
                    this.getChildByMenu(menu.children, treeNode.children)
                })
                return menuList
            }
        },
        methods: {
            getChildByMenu (menus, children) {
                menus.forEach((menu) => {
                    let colorer = '#19be6b'
                    if (menu.type === 2) {
                        colorer = '#ff9900'
                    }
                    let child = {
                        title: menu.title,
                        expand: menu.checked,
                        render: (h, { root, node, data }) => {
                            return h('span', {
                                style: {
                                    display: 'inline-block',
                                    fontWeight: 'bold',
                                    fontSize: '15px',
                                    color: colorer,
                                    width: '100%'
                                }
                            }, [
                                h('span', [
                                    h(iviewCheck, {
                                        attrs: {
                                            // 定义静态属性
                                        },
                                        props: {
                                            state: menu.checked
                                        },
                                        style: {
                                            marginRight: '8px'
                                        },
                                        on: {
                                            'onChange': () => {
                                                this.onChange(menu)
                                            }
                                        }
                                    }),
                                    h('Icon', {
                                        props: {
                                            type: 'ios-pricetag'
                                        },
                                        style: {
                                            marginRight: '8px'
                                        }
                                    }),
                                    h('span', data.title)
                                ])
                            ]);
                        }
                    }
                    child.children = []
                    children.push(child)
                    this.getChildByMenu(menu.children, child.children)
                })
            },
            onChange (menu) {
                this.$bus.start()
                let url = this.baseURL + '/saveRoleMenus/' + this.id
                this.$ajax.post(url, menu).then((response) => {
                    let {code} = response.data
                    if (code === 0) {
                        this.init()
                        this.$bus.finish()
                    }
                }, this).then((error) => {
                    if (error) {
                        this.$bus.error()
                    }
                }, this)
            },
            init () {
                if (this.$route.query.id) {
                    this.id = this.$route.query.id
                    let url = this.baseURL + '/getMenus/' + this.id
                    this.$ajax.get(url).then((response) => {
                        let {code, data} = response.data
                        if (code === 0) {
                            this.menus = data
                        }
                    }, this).then((error) => {
                        if (error) {
                            this.$bus.error()
                        }
                    }, this)
                } else {
                    this.$bus.modal('warning', '系统提示', '页面已失效,请重新打开')
                }
            }
        },
        mounted () {
            this.init()
        },
        watch:{
            '$route' (to) {
               if (to.name === 'system_role_auth') {
                   this.init()
               } 
            }
        }
    }
</script>

<style>
</style>
